<template>
	<view>
		<view @click.stop="handleOpen">
			<up-input
			  v-model="showValue"
			  disabled
			  disabledColor="#ffffff"
			  inputAlign="right"
			  :placeholder="placeholder"
			  border="none" />
		</view>
		<up-datetime-picker
			ref="pickerRef"
			v-model="pickerValue"
		  :show="isShow"
		  :mode="mode"
		  :title="title"
		  confirmColor="#125796"
			closeOnClickOverlay
			@cancel="handleClose"
			@close="handleClose"
			@confirm="handleReturnValue"/>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
  import useCommonUtils from '@/utils/common'

  const { formatDate } = useCommonUtils();
  const props = defineProps({
    value: {
      type: [String, Number],
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'date' //date 或 datetime 注意不是驼峰
    },
		placeholder: {
		  type: String,
		  default: '请选择'
		},
    readonly: {
      type: Boolean,
      default: false
    }
  });

	onMounted(() => {
		pickerValue.value = props.value ? new Date(props.value).getTime() : Date.now()
		showValue.value = props.value ? props.value : ''
	})
	
	const emits = defineEmits(['update:value'])
	const isShow = ref(false)
	const pickerRef = ref(null)
	const pickerValue = ref()
	const showValue = ref()
	
	const handleOpen = () => {
    if (props.readonly) return;
		isShow.value = true
	}
	const handleClose = () => {
		isShow.value = false
	}
	const handleReturnValue = e => {
		//这里直接拿v-model绑定的 pickerValue值，总是拿到上一次的值，不知道为什么
		showValue.value = formatDate(new Date(e.value), props.mode);
		emits('update:value', showValue.value)
		isShow.value = false
	}
</script>

<style lang="scss"></style>
